import React from 'react';
import Like from '../common/like';
import THeader from './tHeader.jsx'
import TBody from "./tBody.jsx";

const MoviesTable = ({ movies, onLike }) => {
    const columns = [
        {
            path: 'title',
            label: '标题',
            content: movie => (
                <a target="_blank" rel="noreferrer" href={movie.alt}>
                    {movie.title}
                </a>
            )
        },
        {
            path: 'original_title',
            label: '原标题'
        },
        {
            path: 'year',
            label: '上映时间'
        },
        {
            path: 'genres',
            label: '分类'
        },
        {
            path: 'rating.average',
            label: '评分'
        },
        {
            path: 'like',
            label: '收藏',
            content: movie => (
                <Like
                    liked={movie.liked}
                    onClick={() => onLike(movie)}
                />
            )
        }
    ]
    return (
        <table className="table">
            <THeader columns={columns}></THeader>
            <TBody columns={columns} data={movies}></TBody>
        </table>
    );
}

export default MoviesTable;
